<script lang="ts" setup>
import { Plus, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getDictType,delDictType } from '@/api/modules/system'
import addPosition from './components/addPosition.vue'
import { onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
const pageNum = ref(1)
const total = ref(0)
const router = useRouter()
const dialogVisible = ref(false)
const rows = ref<any>({})
const vForm = ref<FormInstance>()
const formData = ref({
  starDate: '',
  endDate: '',
  department: '',
  staffType: '',
  staffStatus: '',
  jobNo: '',
  carNo: '',
  name: '',
  channelName: ''
})
const staffList = ref<any>([
  {
    code: '1',
    name: '部门1'
  },
  {
    code: '2',
    name: '部门2'
  }
])
const daterange = ref<any>([])
const tableData = ref([])
async function getList() {
  tableData.value = [
    {
      name: '张三',
      jobNo: '123456',
      carNo: '999999999',
      department: '业务部 1',
      duty: '总经理 1',
      staffStatus: '在职',
      isTemplate: '否',
      wellStar: '2023-01-01',
      wellEnd: '2023-01-01',
      wellTime: '30分钟',
      jobType: '工种 1'
    }
  ]
    total.value = 1
  // const params = {
  //   pageNum: pageNum.value,
  //   pageSize: 10,
  //   data: {
  //     ...formData.value,
  //   }
  // }
  // const res = await getDictType(params)
  // if (res.code === 200) {
  //   tableData.value = res.data.records
  //   total.value = res.data.totalPage
  // }
}
function resetForm(isResh: boolean) {
  vForm.value && vForm.value.resetFields()
  daterange.value = []
}
function closeDialog(isResh: boolean) {
  dialogVisible.value = false
  if (isResh) {
    handleSearch()
  }
}
function handleSearch() {
  pageNum.value = 1
  // getList()
}
function handleDetails(row: object) {
  rows.value = row
  dialogVisible.value = true
}

function handleCurrentChange(val: number) {
  pageNum.value = val
  // getList()
}
function handleSet(row: any) {
  router.push({
    path: '/system/dict/setting',
    query: {
      type: row.dictType
    },
  })
}

const view = ref<any>('add')

function dateChange(val: any) {
  if (val && val.length) {
    formData.value.starDate = val[0]
    formData.value.endDate = val[1]
  }
}

function handleDetal(row: any) {
  tableData.value = tableData.value.filter((item: any) => item.id !== row.id)
}

function handleConcel(flag: Boolean) {
  dialogVisible.value = false
  if (flag) {
    getList()
  }
}


getList()
</script>

<template>
  <div>
    <ContentWrap>
      <el-form
        ref="vForm"
        :model="formData"
        label-position="right"
        label-width="100px"
        size="default"
        @submit.prevent
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出入井时间" class="label-right-align" prop="daterange">
              <el-date-picker
                v-model="daterange"
                value-format="YYYY-MM-DD"
                type="daterange"
                style="width: 100%;"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门" class="label-right-align" prop="department">
              <el-select v-model="formData.department" clearable>
                <el-option v-for="item in staffList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="人员类型" class="label-right-align" prop="staffType">
              <el-select v-model="formData.staffType" clearable>
                <el-option v-for="item in staffList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工号" class="label-right-align" prop="jobNo">
              <el-input v-model="formData.jobNo" type="text" clearable placeholder="请输入工号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡号" class="label-right-align" prop="carNo">
              <el-input v-model="formData.carNo" type="text" clearable placeholder="请输入卡号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名" class="label-right-align" prop="name">
              <el-input v-model="formData.name" type="text" clearable placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工状态" class="label-right-align" prop="staffStatus">
              <el-select v-model="formData.staffStatus" clearable>
                <el-option v-for="item in staffList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16" style="text-align: right;">
            <el-button type="primary" @click="handleSearch">
              查询
            </el-button>
            <el-button @click="resetForm">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin-bottom: 10px;">
        <el-button type="primary" :icon="Plus" @click="rows = {}; dialogVisible = true">
          添加模板
        </el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="姓名" min-width="100" align="center" />
        <el-table-column prop="jobNo" label="工号" min-width="150" align="center" />
        <el-table-column prop="carNo" label="卡号" min-width="150" align="center" />
        <el-table-column prop="department" label="部门" min-width="100" align="center" />
        <el-table-column prop="duty" label="职务" min-width="100" align="center" />
        <el-table-column prop="jobType" label="工种" min-width="100" align="center" />
        <el-table-column prop="staffStatus" label="员工状态" min-width="120" align="center" />
        <el-table-column prop="isTemplate" label="是否转换为模版" min-width="130" align="center" />
        <el-table-column prop="wellStar" label="入井时间" min-width="180" align="center" />
        <el-table-column prop="wellEnd" label="出井时间" min-width="180" align="center" />
        <el-table-column prop="wellTime" label="井下停留时间" min-width="180" align="center" />
        <el-table-column align="center" label="操作" min-width="180" fixed="right">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleDetails(scope.row)">
              修改
            </el-button>
            <el-popconfirm title="确定删除该条数据?" @confirm="handleDetal(scope.row)">
              <template #reference>
                <el-button size="small" type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-wrap">
        <Pagination
        :limit="10"
        :page="pageNum"
        :total="(total)"
        @pagination="handleCurrentChange"
        />
      </div>
    </ContentWrap>
    <el-dialog v-model="dialogVisible" title="位置管理" width="70%">
      <add-position v-if="dialogVisible" :data="rows" :viewType="view" @concel="handleConcel" />
    </el-dialog>
  </div>
</template>
